<template>
  <view class="app-container">
    <view class="data-list">
      <view class="data-list-item" v-for="(item,index) in list" :key="index">
        <view class="data-list-item-title">
          <view class="data-list-item-title-left">
            总金额：￥
            <text class="data-list-item-title-left-text money">{{ item.total_money }}</text>
          </view>
          <view class="data-list-item-title-right">
            <text class="data-list-item-title-right-text">{{ item.created_at }}</text>
          </view>
        </view>
        <view class="data-list-item-footer">
          充值金额：￥
          <text class="data-list-item-footer-text money">{{ item.money }}</text>
        </view>
        <view class="data-list-item-footer">
          赠送金额：￥
          <text class="data-list-item-footer-text money">{{ item.gift_money || '0.00' }}</text>
        </view>
        <view class="data-list-item-content">
          充值订单号：
          <text class="data-list-item-content-text order-sn" @click="copyText(item.order_sn)">{{ item.order_sn }}</text>
        </view>
        <view class="data-list-item-footer">
          支付方式：
          <text class="data-list-item-footer-text">{{ item.pay_type_desc }}</text>
        </view>
        <view class="data-list-item-footer">
          支付状态：
          <text :class="'data-list-item-footer-text ' + (item.pay_status==1?'pay-success':'pay-error')">
            {{ item.pay_status_desc }}
          </text>
        </view>
        <view class="data-list-item-footer" v-if="item.pay_type==3">
          审核状态：
          <text class="data-list-item-footer-text">{{ item.check_status_desc || '--' }}</text>
        </view>
        <view class="data-list-item-footer">
          交易号：
          <text class="data-list-item-footer-text">{{ item.trans_no || '--' }}</text>
        </view>


      </view>
    </view>

  </view>
</template>

<script>
import {list} from "@/pages/packageA/user/recharge/recharge_api";

export default {
  data() {
    return {
      page: 1,
      list: []
    };
  },
  onLoad() {
    this.getList()
  },
  onPullDownRefresh: function () {
    this.getList(true);
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 2000)
  },
  //触底
  onReachBottom() {
    this.getList()
  },
  methods: {
    getList(is_init) {
      if (is_init) {
        this.page = 1
        this.list = []
      }
      list({page: this.page})
          .then(res => {
            console.log(res)
            if (res.code === 0) {
              this.list = this.list.concat(res.data.list)
            }
          }).finally(() => {
        this.page += 1
      })
    }
  },
}
</script>

<style lang="scss">
.data-list {
  .data-list-item {
    margin-bottom: 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

    .data-list-item-title {
      display: flex;
      justify-content: space-between;

      .data-list-item-title-left {
        .data-list-item-title-left-text {
          font-size: 32rpx;
          font-weight: bold;
        }

        .data-list-item-title-right {
          .data-list-item-title-right-text {
            font-size: 24rpx;
            color: #999;
          }
        }

        .data-list-item-content {
          margin-top: 10rpx;

          .data-list-item-content-text {
            font-size: 28rpx;
            color: #666;
          }
        }

        .data-list-item-footer {
          margin-top: 10rpx;

          .data-list-item-footer-text {
            font-size: 28rpx;
            color: #666;
          }
        }

      }
    }

    .order-sn {
      color: #19a6de;
    }

    .money {
      color: #e90808;
    }

    .pay-success {
      color: #089c08;
    }

    .pay-error {
      color: rgba(200, 196, 196, 0.9);
    }
  }
}

</style>
